<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--react核⼼包-->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!--react dom相关的包-->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 提供es6和jsx的⽀持-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        const container = document.getElementById('app');
        const root = ReactDOM.createRoot(container);
        class TodoList extends React.Component {
            state={
                todos:[], // 待办事项列表
                inputValue:''
            }

            addTodo = ()=>{
                this.setState({
                    todos:[...this.state.todos, this.state.inputValue],
                    inputValue:'' // 清空输入框
                })
            }

            inputChange = (e)=>{
                this.setState({
                    inputValue:e.target.value
                });
            }
            removeTodo = (index)=>{
                this.setState({
                    todos: this.state.todos.filter((item, idx)=>idx!==index)
                })
            }

            render(){
                let {todos, inputValue} = this.state;
                let items = todos.length>0 && todos.map((item, index)=>{
                    return (
                        <li onClick={()=>this.removeTodo(index)} key={index}>{item}</li>
                    )
                })
                return (
                    <>
                        <input value={inputValue} onChange={this.inputChange} type="text"/>
                        <button onClick={this.addTodo}>添加</button>
                        <ul>
                            {items}
                        </ul>
                    </>
                )
            }
        }

        root.render(
            <>
                <TodoList>
                </TodoList>
            </>
        )
    </script>
</body>
</html>